<template>
<div>
    <TrendDialog v-show="$store.state.dialog==1"/>
    <AppealDialog v-show="$store.state.dialog==2"/>
    <!-- <FoodDialog v-show="$store.state.dialog==2"/> -->
    <WorkDialog v-show="$store.state.dialog==3"/>
    <!-- 禁用用户弹窗 -->
    <BanUserDialog v-show="$store.state.dialog==4"/>
    <!-- 查看动态评论弹窗 -->
    <LookComments v-show="$store.state.dialog==5"/>

    <UserDialog v-show="$store.state.dialog==6"/>
    <ActiveDialog v-show="$store.state.dialog==7"/>
</div>
</template>

<script>
import UserDialog from './UserDialog.vue'
import TrendDialog from './TrendDialog.vue'
import AppealDialog from './AppealDialog.vue'
import WorkDialog from './WorkDialog.vue'
import BanUserDialog from './BanUserDialog.vue'
import LookComments from './LookComments.vue'
import ActiveDialog from './ActiveDialog.vue'
export default {
    name: 'Dialog',
    components:{UserDialog,TrendDialog,AppealDialog,WorkDialog,BanUserDialog,LookComments,ActiveDialog},
    methods:{
        giveUp(){
            this.$store.state.dialog = 0
        }
    }
}
</script>

<style lang="less">
.dialog{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001;
    background-color: rgba(0, 0, 0, 0.6);
    .background{
        width: 100%;
        height: 100vh;
        z-index: 1000;
    }
    .work{
        margin-top: 80px !important;
    }
    .dialogdiv{
        width: 600px;
        // height: 380px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-top: 30px;
        margin-left: -300px;
        background-color: white;
        border-radius: 5px;
        padding: 40px 40px 20px 40px;
        z-index: 1001;
        label{
            font-size: 20px;
        }
        .message{
            width: 100%;
            // height: 200px;
            // background-color: black;
            padding:10px;
            color: #606266;
            font-size: 14px;
            .perdiv{
                width: 50%;
                height: 40px;
                float: left;
                margin-bottom: 8px;
                label{
                    line-height: 36px;
                    width: 80px;
                    text-align: right;
                    vertical-align: middle;
                    float: left;
                    font-size: 16px;
                    color: #606266;
                }
                input{
                    max-width: 155px;
                    height: 30px;
                    margin-top: 3px;
                }
                select{
                    width: 155px;
                    height: 30px;
                    margin-top: 3px;
                    background-color: white;
                    border: 1px solid #606266;
                    border-radius: 2px;
                }
            }
            .food{
                margin-top: 40px !important;
            }
            .discribe{
                margin-top: 98px !important;
            }
            .photo{
                margin-top: 98px;
                .photoText{
                    width: 100%;
                    height: 30px;
                    padding: 0 10px;
                }
                label{
                    line-height: 30px;
                    // width: 80px;
                    text-align: right;
                    vertical-align: middle;
                    float: left;
                    font-size: 16px;
                    color: #606266;
                }
                .pictures{
                    // margin-top: 120px;
                    width: 100%;
                    // height: 100px;
                    // border: 1px solid black;
                    margin: 6px;
                    border-radius: 6px;
                    overflow: hidden;
                    display: flex;
                    flex-wrap: wrap;
                    // justify-content: space-between;
                    gap: 9px;
                    span{
                        height: 100px;
                    }
                    img{
                        height: 100px;
                    }
                }
            }
            .text{
                width: 100%;
                max-height: 180px;
                // height: 180px;
                margin: 5px;
                label{
                    line-height: 36px;
                    width: 70px;
                    text-align: right;
                    vertical-align: middle;
                    float: left;
                    font-size: 16px;
                    color: #606266;
                }
                span{
                    cursor:text;
                    width: 100%;
                    overflow: auto;
                    padding: 10px;
                    resize: none;
                    font-size:13px; 
                    font-family:Arial;
                    overflow-y:hidden; 
                    line-height:20px;
                    box-sizing: border-box;
                    overflow-wrap: normal;
                }
                .textTop{
                    height: 40px;
                }
                .textarea{
                    max-height: 100px;
                    overflow-y: auto;
                }
            }
            .buttons{
                float: right;
                width: 280px;
                height: 30px;
                margin-top:10px;
                margin-right: 20px;
                text-align: right;
                // background-color: yellow;
                button{
                    display: inline-block;
                    line-height: 1;
                    white-space: nowrap;
                    cursor: pointer;
                    background: #fff;
                    border: 1px solid #dcdfe6;
                    border-color: #dcdfe6;
                    color: #606266;
                    text-align: center;
                    box-sizing: border-box;
                    outline: none;
                    margin: 0;
                    font-weight: 400;
                    padding: 7px 20px;
                    font-size: 14px;
                    border-radius: 4px;
                    // float: right;
                }
                button:hover{
                    background: #46a6ff;
                    border-color: #46a6ff;
                    color: #fff;
                }
                .yesbtn{
                    color: #fff;
                    background-color: #1890ff;
                    border-color: #1890ff;
                    margin-right: 12px;
                }
                .deleteUser{
                    color: #ff9292;
                    background-color: #ffeded;
                    border-color: #ffdbdb;
                    margin-right: 12px;
                }
                .deleteUser:hover{
                    color: #ffeded;
                    background-color: #ff9292;
                    border-color: #ff9292;
                }
                .giveup{
                    color: #ffba00;
                    background: #fff8e6;
                    border-color: #ffe399;
                }
                .giveup:hover{
                    color: #fff8e6;
                    background: #ffba00;
                    border-color: #ffba00;
                }
            }
        }
    }
}
</style>